<template>
		<u-popup v-model="show_editor" mode="bottom" width="100%" height="100%" :closeable="true">
			<view class="warp" style="padding-top: 150rpx;">
				<view class='toolbar' style="height: auto;overflow-y: auto;">
					<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold" @tap="format"></view>
					<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"  @tap="format"></view>
					<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline" @tap="format"></view>
					<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike" @tap="format"></view>
					<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align" data-value="center" @tap="format"></view>
					<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align" data-value="right" @tap="format"></view>
					<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align" data-value="justify" @tap="format"></view>
					
					<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
					
					<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color" data-value="#0000ff" @tap="format"></view>
					<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00" @tap="format"></view>
					
					<view class="iconfont icon-date" @tap="insertDate"></view>
					
					<view class="iconfont icon--checklist" data-name="list" data-value="check" @tap="format"></view>
					<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list" data-value="ordered" @tap="format"></view>
					<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet" @tap="format"></view>
					
					<view class="iconfont icon-undo" @tap="undo"></view>
					<view class="iconfont icon-redo" @tap="redo"></view>
					
					<view class="iconfont icon-outdent" data-name="indent" data-value="-1" @tap="format"></view>
					<view class="iconfont icon-indent" data-name="indent" data-value="+1" @tap="format"></view>
					<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
					<view class="iconfont icon-charutupian" @tap="insertImage"></view>
					<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header" :data-value="1" @tap="format"></view>
					<view class="iconfont icon-shanchu" @tap="clearModal=true"></view>
				</view>
				<view class="content">
					<editor id="editor" class="edit-container" :placeholder="placeholder" @ready="onEditorReady" :content="content"></editor>
				</view>
				
				<u-modal v-model="clearModal" content="是否清空编辑器全部内容？" :show-cancel-button="true" @confirm="clear"></u-modal>
				<view class="ui-mt10 confirm-btn">
					<u-button type="primary" @click="submit()">确定</u-button>
				</view> 
			</view>
		</u-popup>
</template>

<script>
    export default {
        name:'',
		props:{
			content:{
				type: String,
				default:''
			}
		},
        data(){
            return{
				show_editor:false,
                readOnly: false,
                formats :{},
                placeholder :'请输入内容...',
                editorCtx :{},
				clearModal:false
            }
        },
        methods:{
			show(){
				this.show_editor = true;
			},
            onEditorReady() {
                uni.createSelectorQuery().select('#editor').context((res) => {
                    this.editorCtx = res.context
                    let EContent = {
                        html: this.content
                    }
                    this.editorCtx.setContents(EContent);
                }).exec()
            },
            undo() {
                this.editorCtx.undo()
            },
            redo() {
                this.editorCtx.redo()
            },
            format(e) {
                console.log(e)
                let {
                    name,
                    value
                } = e.target.dataset
                if (!name) return
                this.editorCtx.format(name, value)
            },
            onStatusChange(e) {
                const formats = e.detail
                this.formats = formats
            },
            insertDivider() {
                this.editorCtx.insertDivider({
                    success: function() {
                        console.log('insert divider success')
                    }
                })
            },
            clear() {
				let that = this;
				that.editorCtx.clear()
				// uni.showModal({
				// 	title:'温馨提示',
				// 	content:'是否清空编辑器全部内容？',
				// 	success(res){
				// 		if (res.confirm) {
				// 			that.editorCtx.clear()
				// 		}
				// 	}
				// })
            },
            removeFormat() {
                this.editorCtx.removeFormat()
            },
            insertDate() {
                const date = new Date()
                const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
                this.editorCtx.insertText({
                    text: formatDate
                })
            },
            insertImage() {
                uni.chooseImage({
                    count: 1,
                     success: async (res) => {
                        let imgurl=await this.toUploadImgs(res)
                        this.editorCtx.insertImage({
                            src: imgurl,
                            alt: '图像',
                            success: function() {
                                console.log('insert image success')
                            }
                        })
                    }
                })
            },
            submit(){
                this.editorCtx.getContents({
                    success : (res)=>{
                        let html=res.html
                        if(html=="<p><br></p>"){
                            html=""
                        }
                        this.show_editor = false;
                        this.$emit("confirm_input",html)
                    }
                })
            },
            toUploadImgs : function(fileList){
				let that = this;
				let filePath = fileList.tempFilePaths[0];
                return new Promise(async (resolve,reject)=>{
                    let res = await that.$http.uploadFile({
                    	serverUrl: that.$api.default.upload,
                    	fileKeyName: "file",
                    	file: filePath
                    });
					if(res.code !== 0){
						return that.$http.toast(res.msg);
					}
					resolve(res.data.url);
                })
            },
        }
    }
</script>

<style lang="scss">
    @import "./editor-icon.css";
    
    .warp{
        width: 100%;
        // height: 100%;
        background-color: white;
        box-sizing: border-box;
		height:100vh;
    }
    
    .iconfont {
        width: 32px;
        height: 32px;
        cursor: pointer;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .toolbar {
        box-sizing: border-box;
        border-bottom: 0;
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
        margin-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .ql-active {
        color: #06c;
    }
    
    .content{
        height: 62%;
        overflow-y: scroll;
    }
    
    .edit-container{
        max-height: 500px;
    }
	.ql-container{
		height:500px !important;
	}
	.confirm-btn{
		margin-top:20rpx;
		// position: fixed;
		// bottom: 0;
		// width: 100%;
	}
</style>

